<template>
  <el-dialog v-model="visible" title="人员选择" width="800">
    <el-row justify="center">
      <el-col :span="10" class="container">
        <div class="mb-10">
          <el-input v-model="searchVal" size="small" clearable @input="onSearchChange" />
        </div>
        <div class="mb-10" v-show="result.length === 0">
          <EmoList
            ref="chatRef"
            :data="chatList"
            :check-list="checkList"
            @check-change="handleSelectionChange($event, 'chat')"
          />
        </div>
        <div class="mb-10" v-show="result.length > 0">
          <el-text type="success">成员</el-text>
          <EmoList
            ref="userRef"
            :data="userList"
            :check-list="checkList"
            @check-change="handleSelectionChange($event, 'select')"
          />
        </div>
        <div class="mb-10" v-show="result.length > 0">
          <el-text type="primary">群组</el-text>
          <EmoList
            ref="groupRef"
            :data="groupData"
            :check-list="checkList"
            @check-change="handleSelectionChange($event, 'select')"
          />
        </div>
      </el-col>
      <el-col :span="14">
        <div class="mb-10">
          <el-button type="primary" size="small" @click="clearSelection">清空</el-button>
        </div>
        <div class="flex">
          <el-tag
            class="gap-2"
            v-for="tag in checkList"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { EmoList } from "../../checkbox";
import chatData from "./chat.json";
import { transformArray } from "@/utils";

const chatList = transformArray(chatData.chats, (item) => ({
  id: item.id,
  name: item.name,
  type: item.type,
  checked: false
}));

const groupData = transformArray(chatData.groups, (item) => ({
  id: `${item.id}`,
  name: item.name,
  checked: false
}));

const userList = transformArray(chatData.users, (item) => ({
  id: item.id,
  name: `${item.nickName}-${item.position}`,
  checked: false
}));

const props = defineProps<{
  modelValue: boolean;
}>();

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const searchVal = ref("");
const result = ref([]);
const checkList = ref([]);

const chatRef = ref(null);
const groupRef = ref(null);
const userRef = ref(null);

const handleCancel = () => {
  emit("update:modelValue", false);
};

const handleOk = () => {
  if (checkList.value.length === 0) {
    ElMessage.warning("请选择人员");
    return;
  }
  emit("update:modelValue", false);
  console.table(checkList.value);
};

const setCheckedList = (list: Recordable[]) => {
  checkList.value = list;
  chatRef.value?.setCheckedRows(list);
  userRef.value?.setCheckedRows(list);
  groupRef.value?.setCheckedRows(list);
};

const handleClose = (tag: Recordable) => {
  const newUserList = checkList.value.filter((m) => m.id !== tag.id);
  setCheckedList(newUserList);
};

const clearSelection = () => {
  setCheckedList([]);
};

const onSearchChange = (str: string) => {
  if (!str) {
    result.value = [];
  } else {
    const newList = chatList.filter((item) => item.name.indexOf(str) > -1);
    result.value = newList;
  }
};

const handleSelectionChange = (row: Recordable, type: "select" | "chat") => {
  const selectedIdx = checkList.value.findIndex((item) => !row.checked && item.id === row.id);
  if (selectedIdx > -1) {
    checkList.value.splice(selectedIdx, 1);
  } else {
    checkList.value.push(row);
  }

  if (type === "select") {
    chatRef.value?.setCheckedRows(checkList.value);
  } else {
    userRef.value?.setCheckedRows(checkList.value);
    groupRef.value?.setCheckedRows(checkList.value);
  }
};
</script>

<style scoped>
.mb-10 {
  margin-bottom: 10px;
}

.flex {
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
}

.gap-2 {
  margin: 4px;
}

.container {
  height: 500px;
  overflow-y: auto;
}
</style>
